<template>
  <div>
    <div>
      <v-menu
        v-model="menu"
        :close-on-content-click="false"
        offset-y
        origin="top"
        content-class="v-settings"
        transition="scale-transition"
        min-width="300px"
      >
        <template v-slot:activator="{ attrs, on }">
          <v-btn
            class="mr-2"
            min-width="0"
            text
            small
            fab
            v-bind="attrs"
            v-on="on"
          >
            <v-icon>mdi-account</v-icon>
          </v-btn>
        </template>
        <v-card
          class="text-center mb-0"
        >
          <v-card-text>
            <strong class="mb-3 d-inline-block">{{ lanChar.uiSettings.UISettingsButtonTitle }}</strong>
            <v-divider class="my-1 secondary" />

            <v-row
              align="center"
              no-gutters
            >
              <v-col cols="auto">
                {{ lanChar.uiSettings.UISettingsDarkModeDescp }}
              </v-col>

              <v-spacer />

              <v-col cols="auto">
                <v-switch
                  v-model="$vuetify.theme.dark"
                  class="ma-0 pa-0"
                  color="secondary"
                  hide-details
                  :label="$vuetify.theme.dark.toString()"
                  @click="setDarkMode()"
                />
              </v-col>
            </v-row>

            <v-divider class="my-4 secondary" />

            <v-row
              align="center"
              no-gutters
            >
              <v-col cols="auto">
                {{ lanChar.uiSettings.UISettingsCHSModeDescp }}
              </v-col>

              <v-spacer />

              <v-col cols="auto">
                <v-switch
                  v-model="chineseMode"
                  class="ma-0 pa-0"
                  color="secondary"
                  hide-details
                  :label="`${chineseMode.toString()}`"
                  @click="setLanguage()"
                />
              </v-col>
            </v-row>

            <v-divider class="my-4 secondary" />

            <v-row
              justify="center"
            >
              <v-btn
                color="secondary"
                height="100%"
                @click="handleLogout()"
              >
                {{ lanChar.uiSettings.UISettingsLogout }}
                <v-icon>mdi-logout</v-icon>
              </v-btn>
            </v-row>

            <v-divider class="my-4 secondary" />

            <div>
              <strong class="mb-3 d-inline-block">{{ lanChar.uiSettings.UISettingsVendor }}</strong>
            </div>
          </v-card-text>
        </v-card>
      </v-menu>
    </div>
    <material-snackbar-tip
      v-model="snackbarDescp.snackbar"
      :type="snackbarDescp.snackbarType"
      :timeout="snackbarDescp.snackbarTimeout"
      v-bind="{
        bottom: true,
        right: true
      }"
      :text="snackbarDescp.snackbarContent"
    />
  </div>
</template>

<script>
  import globalDef from '@/util/globals'
  import lan from '@/util/lan-char'
  import * as mcAxios from '@/util/mcaxios'
  import { mapActions } from 'vuex'

  export default {
    name: 'DefaultSettings',

    data: () => ({
      lanChar: lan.GetLan(),
      // snackbar data
      snackbarDescp: {
        snackbar: false,
        snackbarContent: 'snackbar content',
        snackbarTimeout: 2000,
        snackbarType: 'info',
      },
      menu: false,
      chineseMode: false,
    }),

    computed: {
    },

    watch: {
    },

    beforeDestroy () {
    },

    created () {
      this.getSystemInfo()
    },
    mounted () {
    },
    methods: {
      ...mapActions('user', [
        'logout',
      ]),
      tipInfo (level, content, timeout) {
        this.snackbarDescp.snackbarType = level
        this.snackbarDescp.snackbarContent = content
        this.snackbarDescp.snackbarTimeout = timeout
        this.snackbarDescp.snackbar = true
      },
      getSystemInfo () {
        const data = {
          request_type: 'system info get',
          instance_id: 'instance_id',
          sequence_no: 1000,
        }
        mcAxios.axiosGetConfig(data)
          .then((res) => {
            if (res.data.status === true) {
              this.chineseMode = (res.data.data.ui_language === 1)
              this.$vuetify.theme.dark = res.data.data.ui_darkmode
              this.lanChar = lan.SetLan(res.data.data.ui_language)
              globalDef.VueObject.$emit('lanChange', this.lanChar)
            } else {
              console.log('getSystemInfo resonse fail')
            }
          })
          .catch((e) => {
            console.log('getSystemInfo request fail: ' + e)
          })
      },
      setLanguage () {
        this.lanChar = lan.SetLan(this.chineseMode ? 1 : 0)
        globalDef.VueObject.$emit('lanChange', this.lanChar)
        const data = {
          request_type: 'ui language set',
          instance_id: 'instance_id',
          sequence_no: 1000,
          data: {
            ui_language: (this.chineseMode ? 1 : 0),
          },
        }
        mcAxios.axiosSetConfig(data)
          .then((res) => {
            if (res.data.status === true) {
              this.tipInfo('success', this.lanChar.tipInfoOperateSuccess, globalDef.TIPINFO_DISPLAY_DURATION)
            } else {
              this.tipInfo('info', this.lanChar.tipInfoOperateRespFail + res.data.msg, globalDef.TIPINFO_DISPLAY_DURATION)
            }
          })
          .catch((e) => {
            this.tipInfo('error', this.lanChar.tipInfoOperateRequestFail + e, globalDef.TIPINFO_DISPLAY_DURATION)
          })
      },
      setDarkMode () {
        const data = {
          request_type: 'ui darkmode set',
          instance_id: 'instance_id',
          sequence_no: 1000,
          data: {
            ui_darkmode: this.$vuetify.theme.dark,
          },
        }
        mcAxios.axiosSetConfig(data)
          .then((res) => {
            if (res.data.status === true) {
              this.tipInfo('success', this.lanChar.tipInfoOperateSuccess, globalDef.TIPINFO_DISPLAY_DURATION)
            } else {
              this.tipInfo('info', this.lanChar.tipInfoOperateRespFail + res.data.msg, globalDef.TIPINFO_DISPLAY_DURATION)
            }
          })
          .catch((e) => {
            this.tipInfo('error', this.lanChar.tipInfoOperateRequestFail + e, globalDef.TIPINFO_DISPLAY_DURATION)
          })
      },
      handleLogout () {
        this.logout()
        this.$router.replace('/login')
      },
    },
  }
</script>

<style lang="sass">
  .v-settings
    .v-item-group > *
      cursor: pointer

    &__item
      border-width: 3px
      border-style: solid
      border-color: transparent !important

      &--active
        border-color: #00cae3 !important
</style>
